<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <b style="color: #606266;margin: 20px 30px;text-align: center;font-size: 20px;">所有班级列表信息</b>
              </div>
            </el-col>
          </el-row>
          <div style="margin: 50px auto;width: 90%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
            <el-table
              :data="classroomData"
              border
              style="width: 100%">
              <el-table-column
                prop="classroomName"
                label="班级名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="teacherName"
                label="教师姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="classroomPeopleNum"
                label="班级人数">
              </el-table-column>
              <el-table-column
                prop="classroomDescribe"
                label="班级描述">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button  size="small" type="primary" round>班级详情</el-button>
                  <el-button slot="reference" size="small" type="success" round @click="open(scope.row)">加入班级</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/studentSide/left'
import Top from '@/components/studentSide/top'

export default {
  name: 'studentAllClassroom',
  data (row) {
    return {
      studentId: '',
      visible: false,
      formInline: {
        user: '',
        region: ''
      },
      classroomData: [{
        classroomName: '',
        classroomPeopleNum: '',
        classroomDescribe: '',
        teacherName: '',
        teacherId: '',
        classroomId: ''
      }]
    }
  },
  created () {
    this.getStudentId()
    this.getAllClassroom()
  },
  methods: {
    // 获取教学生id
    getStudentId () {
      this.studentId = JSON.parse(localStorage.getItem('student')).studentId
    },
    open (row) {
      this.$confirm('确定加入该班级?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.joinClassroom(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入'
        })
      })
    },
    onSubmit () {
      console.log('submit!')
    },
    // 获取所有班级
    getAllClassroom () {
      this.$axios.get('http://localhost:8888/studentGetAllClassroom').then(res => {
        if (res.data.flag) {
          this.classroomData = res.data.data
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    },
    // 加入班级
    joinClassroom (row) {
      this.$axios.post('http://localhost:8888/studentJsonClassroom/' + this.studentId, row).then(res => {
        if (res.data.flag && res.data.data === 'success') {
          this.$message({
            type: 'success',
            message: '恭喜你，班级加入成功!'
          })
        } else if (res.data.flag === false && res.data.data === 'err') {
          this.$message({
            message: '警告哦，您已加入该班级，不能重复加入哦',
            type: 'warning'
          })
        }
      }).catch(err => {
        return Promise.reject(err)
      })
    }
  },
  components: {
    Left,
    Top
  }

}
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
<style scoped>
  .router-link-active {
    text-decoration: none;
    color: yellow;
  }
  a{
    text-decoration: none;
    color: white;
  }
  .el-chart-a{
    width: 1200px;
    height: 500px;
    margin: 10px auto;
  }
  .el-chart-1{
    width: 500px;
    height: 500px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    list-style-type: none;
    margin-right: 30px;
  }
  .el-chart-2{
    width: 500px;
    height: 500px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    list-style-type: none;
  }
  .el-chart-b{
    width: 1200px;
    height: 500px;
    margin: 20px auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
  }
  li{
    float: left;
  }
  .el-chart{
    width: 100%;
    height: 250px;
  }
  .el-chart ul li{
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .30);
    width: 220px;
    height: 120px;
    /*border: 1px solid gold;*/
    list-style-type: none;
    margin-right: 50px;
  }
  .el-chart ul li:hover{
    background-color: #eee;
  }
</style>
<style>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #cadcf5;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
